import BreadcrumbDept from '@/components/BreadcrumbDept';
import { getBrandListByPage, getCategoryListByPage } from '@/services/stock-goods/api';
import { goodsListByPage } from '@/services/stock-goods/subApi';
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { history, useLocation, useModel } from 'umi';
import ManageTab1 from './manageTab1';
import ManageTab2 from './manageTab2';
import RequestTab from './requestTab';
import './style.less';

const StockList: React.FC = () => {

  const { state: locState } = useLocation<any>();
  const { initialState } = useModel('@@initialState');
  const dept_level = initialState?.currentUser?.dept_level;

  // 分类列表
  const [classList, setClassList] = useState<COMMON.SelectOption[]>([]);
  // 品牌列表
  const [brandList, setBrandList] = useState<COMMON.SelectOption[]>([]);
  // 商品列表
  const [goodsList, setGoodsList] = useState<COMMON.SelectOption[]>([]);

  useEffect(() => {
    if (locState) {
      history.replace(location.pathname, undefined);
    }
    goodsListByPage({ current: 1, pageSize: 9999 }).then(res => {
      const list = res.record_list.map(({ brand_name, goods_id, goods_name, goods_py }) => ({
        label: `【${brand_name}】${goods_name}（${goods_py}）`,
        value: goods_id,
        title: `【${brand_name}】${goods_name}`
      }));
      setGoodsList(list);
    });
    getCategoryListByPage({ current: 1, pageSize: 9999 }).then((res: STOCKGOODSAPI.CategoryItemList) => {
      const list = res.record_list?.map(({ class_id, class_name }: any) => ({ value: class_id, label: class_name })) || [];
      setClassList(list);
    });
    getBrandListByPage({ current: 1, pageSize: 9999 }).then((res: STOCKGOODSAPI.BrandItemList) => {
      const list = res.record_list?.map(({ brand_id, brand_name }: any) => ({ value: brand_id, label: brand_name })) || [];
      setBrandList(list);
    });
  }, [locState]);

  return (
    <PageContainer extra={<BreadcrumbDept />} className="stock-container" breadcrumb={{}}>
      <Tabs
        type="card"
        destroyInactiveTabPane
        tabBarGutter={-1}
        tabBarStyle={{ marginBottom: 0 }}
        defaultActiveKey={locState?.tab ? locState.tab : 'tab1'}
      >
        <Tabs.TabPane key="tab1" tab="库存管理">
          {
            dept_level === '1' && <ManageTab1 tab="tab1" classList={classList} brandList={brandList} goodsList={goodsList} />
          }
          {
            dept_level === '2' && <ManageTab2 classList={classList} brandList={brandList} goodsList={goodsList} />
          }
        </Tabs.TabPane>
        <Tabs.TabPane key="tab2" tab="库存申请">
          <RequestTab tab="tab2" classList={classList} brandList={brandList} goodsList={goodsList} />
        </Tabs.TabPane>
      </Tabs>
    </PageContainer>
  );
};
export default StockList;
